/* --- Reset & base --- */
body{
   font-family: "Comfortaa", sans-serif;
  color:#111827;
}
a{color:inherit;text-decoration:none}

h2{
  font-weight: bold;
}

/* --- Header --- */
.topbar{
  position:fixed;left:0;right:0;z-index:30;backdrop-filter:blur(4px);
}
.nav-left{display:flex;align-items:center;gap:18px;}
.nav-left a{font-weight:500}
.nav-left .sep{color:rgba(255,255,255,0.6);padding:0 8px}

/* --- Hero --- */
.hero{
  background-image: url("../img/banner.png");
  color:#fff;padding-top:88px; position:relative; overflow:hidden;
}

.btn-ajuda{
  font-weight: bold;
  background : #fff;
  padding: 15px;
  color: #2e6df6;
  border-radius: 20px;
  margin-right: 15px;
}

.btn-ajuda:hover{
  background-color: transparent;
  color: #fff;
  border: 2px #fff solid;
}

.btn-conheca{
  font-weight: bold;
  background : transparent;
  padding: 15px;
  color: #fff;
  border-radius: 20px;
border: 2px solid #fff;
}

.btn-conheca:hover{
  background-color: #FFF;
  color: #2e6df6;
}

.hero .container{position:relative;z-index:2}
.hero .blob{position:absolute;right:40px;top:60px;max-width:420px}
.hero h1{font-size:clamp(28px,5vw,48px);font-weight:600;margin-bottom:18px}
.hero p.lead{max-width:640px;opacity:0.95}
.btn-ghost{background:transparent;border:2px solid rgba(255,255,255,0.18);color:#fff}

/* --- Sections spacing --- */
section{
  margin: 80px 0;
}

section:first-of-type{
  margin-top: 0;
}
.section-white{background:#fff}

.section-blue{background:#2e6df6;
padding: 60px 0px;
color: #FFF;
}

/* --- Sobre nós --- */
.sobre-img{border-radius:40px;overflow:hidden}
.sobre-card{background:#fff;padding:20px;border-radius:22px}

/* --- Missao/Visao/Valores --- */
.circle-icon{
  width:90px;
  height:90px;
  min-width:90px;
  min-height:90px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#2E62FF;
  box-shadow:0 6px 20px rgba(46,109,246,0.08);
  flex-shrink: 0;
}

/* --- Tradição e História (marquee) --- */
.marquee-wrap{overflow:hidden;position:relative}
.marquee{
  display:flex;
  gap:18px;
  padding:18px 0;
  align-items:center;
  animation:marquee 24s linear infinite;
}
.marquee img{
  height:140px;
  width:auto;
  border-radius:12px;
  object-fit:cover
}
@keyframes marquee{
  0%{transform:translateX(0)}
  100%{transform:translateX(-50%)}
}

/* --- Dois banners lado a lado --- */
.duo-card{
  height:300px;
  border-radius:16px;
  background-size:cover;
  background-position:center;
  box-shadow:0 10px 25px rgba(0,0,0,0.15);
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  position:relative;
  overflow:hidden;
}

.duo-card::before{
  content:"";
  position:absolute;
  inset:0;
}

.duo-content{
  position:relative;
  color:#fff;
  padding:30px;
  z-index:1;
}

.duo-content i{
  font-size:42px;
  margin-bottom:12px;
  display:block;
}

.duo-content h3{
  margin:10px 0;
}


/* --- Campanha Cards --- */
.cards .card{
  color: #2e6df6;
  border-radius:12px;
  padding:18px;
  height:250px; /* TAMANHO FIXO */
  position:relative;
  background: #fff;
  border: 2px solid #1e6bff;
  box-shadow: 0 7px 7px #2e6df6;
  overflow: hidden; /* impede o conteúdo de estourar */
}

.cards .badge-ico{
  position:absolute;
  left:18px;
  bottom:5px;
  width:35px;
  height:35px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#2e6df6;
  color:#fff;
}



/* --- Galeria com setas --- */
.gallery{position:relative}
.gallery .gimg{
  height:300px;
  border-radius:20px;
  object-fit:cover
}
.gallery .arrow{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:42px;
  height:42px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#2e6df6;
  cursor:pointer;
  color: #FFF;
}
.gallery .arrow.left{left:-10px}
.gallery .arrow.right{right:-10px}

/* --- Volunteer card --- */
.volunteer{
  border-radius:14px;
  padding:34px 28px;
  background:#2e6df6;
  color:#fff;
  text-align:center
}

/* --- Contact minimal --- */
.contact-form input,
.contact-form textarea{
  border:0;
  border-bottom:2px solid rgba(255,255,255,0.35);
  background:transparent;
  padding:10px 8px;
  color:#fff
}
.contact-form label{color:#fff}

#contato{
  margin-bottom: 0 !important;
  padding-bottom: 0;
  padding: 60px;
}
.btn-enviar{
  margin-top: 20px;
  background-color: #fff;
  color: #2e6df6;
  padding: 15px 20px;
  border-radius: 20px;
  border: 0px;
}

.btn-enviar:hover{
  color: #fff;
  background-color: transparent;
  border: #FFF 2px solid;
}

/* --- Footer --- */
footer{
  background:#234CC5;
  color:#fff;
  padding:36px 0;
  text-align:center
}

.form-control::placeholder{
  color: #fff;
  opacity: 1; /* garante branco real, não acinzentado */
}


/* Responsive tweaks */
@media (max-width:991px){
  .hero .blob{display:none}
  .duo{flex-direction:column}
  .marquee{animation-duration:36s}
}


/* ===============================
   MOBILE - até 576px
================================ */
/* ===============================
   CELULAR - até 576px
================================ */
@media (max-width: 576px) {

  /* ESCONDER CABEÇALHO NO CELULAR */
  header,
  .topbar {
    display: none !important;
  }

  /* Margem geral mais confortável */
  .container {
    padding-left: 15px;
    padding-right: 15px;
  }

  /* HERO - esconder imagem e reduzir altura */
  .hero {
    padding: 60px 0 40px;
  }

  .hero img {
    display: none;
  }

  .hero h1 {
    font-size: 22px;
    line-height: 1.3;
  }

  .hero p {
    font-size: 14px;
  }

  .btn-ajuda,
  .btn-conheca {
    display: block;
    margin-bottom: 10px;
    width: 100%;
    text-align: center;
  }

  #quem-somos img {
    max-width: 100%;
    border-radius: 10px;
  }

  #quem-somos p {
    font-size: 14px;
  }

  .circle-icon {
    transform: scale(0.9);
  }

  section h2 {
    font-size: 20px;
  }

  section p {
    font-size: 14px;
  }

  .marquee img {
    height: 120px;
    object-fit: cover;
  }

  .duo-card {
    min-height: 180px;
    background-position: center;
    background-size: cover;
  }

  .duo-content h3 {
    font-size: 16px;
  }

  .duo-content p {
    font-size: 14px;
  }

  .cards .card {
    margin-bottom: 15px;
  }

  .cards h3 {
    font-size: 16px;
  }

  .gallery img {
    height: 140px;
    object-fit: cover;
    border-radius: 8px;
  }
}


/* ===============================
   TABLET - 577px até 992px
================================ */
@media (min-width: 577px) and (max-width: 992px) {

  /* ESCONDER CABEÇALHO NO TABLET */
  header,
  .topbar {
    display: none !important;
  }

  .container {
    padding-left: 25px;
    padding-right: 25px;
  }

  /* HERO - AGORA SEM IMAGEM NO TABLET TAMBÉM */
  .hero {
    padding: 70px 0;
  }

  .hero img {
    display: none;
  }

  .hero h1 {
    font-size: 28px;
  }

  .hero p {
    font-size: 15px;
  }

  #quem-somos p {
    font-size: 15px;
  }

  .circle-icon {
    transform: scale(0.95);
  }

  .marquee img {
    height: 160px;
  }

  .duo-card {
    min-height: 220px;
  }

  .duo-content h3 {
    font-size: 18px;
  }

  .duo-content p {
    font-size: 15px;
  }

  .cards .card-body {
    padding: 15px;
  }

  .gallery img {
    height: 170px;
    object-fit: cover;
  }
}